package com.eliza.base.views.component.progress

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.LargeFloatingActionButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.SmallFloatingActionButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController

/*
* Filled
纯色背景和对比鲜明的文字。
高强调度按钮。这些操作是应用中的主要操作，如“提交”和“保存”。阴影效果强调了按钮的重要性。

填充色调
背景颜色会根据表面的颜色而变化。
也可用于主要操作或重要操作。实心按钮可提供更直观的重量和套装功能，例如“添加到购物车”和“登录”。

上涨
添加阴影即可脱颖而出。
与色调按钮类似。提高高度，让按钮看起来更显眼。

Outlined
具有未填充的边框。
中等强调度按钮，包含重要但不主要的操作。它们可与其他按钮很好地搭配使用，以指明其他次要操作，例如“取消”或“返回”。

文本
显示没有背景或边框的文字。
低强调度按钮，非常适合不太重要的操作（如导航链接）或次要功能（如“了解详情”或“查看详情”）。
* */
@Composable
fun ButtonsScreen(navController: NavController) {
    Column {
        Simple()

        Row {
            FloatingActionButton(
                onClick = { },
                containerColor = Color.White,
                contentColor = Color.Red,
            ) {
                Icon(Icons.Filled.Add, "Floating action button.")
            }
            SmallFloatingActionButton(
                onClick = { },
                containerColor = MaterialTheme.colorScheme.secondaryContainer,
                contentColor = MaterialTheme.colorScheme.secondary
            ) {
                Icon(Icons.Filled.Add, "Small floating action button.")
            }
            LargeFloatingActionButton(
                onClick = { },
                shape = CircleShape,
            ) {
                Icon(Icons.Filled.Add, "Large floating action button")
            }

            ExtendedFloatingActionButton(
                onClick = { },
                icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
                text = { Text(text = "Extended FAB") },
                expanded = false,
            )
        }


    }
}

/*
*
* 悬浮操作按钮 (FAB) 是一种高强调度按钮，可让用户在应用中执行主要操作。它推广一项聚焦的操作，这是用户可能采取的最常见路径，通常固定在屏幕右下角。

请考虑以下三个可能会使用 FAB 的用例：

创建新记事：在记事应用中，FAB 可用于快速创建新记事。
添加新联系人：在聊天应用中，FAB 可以打开一个界面，以便用户将某人添加到对话。
中心位置：在地图界面中，FAB 可以将用户的当前位置作为地图的中心。
在 Material Design 中，有四种类型的 FAB：

FAB：普通尺寸的悬浮操作按钮。
小型 FAB：较小的悬浮操作按钮。
大型悬浮操作按钮：较大的悬浮操作按钮。
扩展型 FAB：仅包含图标的悬浮操作按钮。
* */
@Composable
private fun Simple() {
    Row {
        Button(
            onClick = { },
            colors = ButtonDefaults.buttonColors(Color.DarkGray),
            shape = RoundedCornerShape(5, 1, 10, 10),
            enabled = true
        ) {
            Text("实心按钮 shape")

        }
        Button(
            onClick = { },
            enabled = false,
            shape = RoundedCornerShape(50),

            ) {
            Text("实心按钮 false")
        }
    }
    Row {
        FilledTonalButton(
            onClick = { },
            enabled = true,
            elevation = ButtonDefaults.buttonElevation(
                1.dp,
                10.dp,
                20.dp,
                30.dp,
                40.dp
            ),
            border = BorderStroke(5.dp, Color.Red),
        ) {
            Text("填充色调按钮 true")

        }
        /*defaultElevation: Dp,
              pressedElevation: Dp,
              focusedElevation: Dp,
              hoveredElevation: Dp,
              disabledElevation: D p*/
        FilledTonalButton(
            onClick = { },
            enabled = false,

            elevation = ButtonDefaults.buttonElevation(
                1.dp,
                10.dp,
                10.dp,
                10.dp,
                10.dp
            ),

            ) {
            Text("填充色调按钮 false")
        }
    }
    Row {
        OutlinedButton(
            onClick = { },
            elevation = ButtonDefaults.buttonElevation(
                0.dp,
                10.dp,
                20.dp,
                30.dp,
                40.dp
            ),
        ) {
            Text("轮廓按钮 OutlinedButton")
        }
        OutlinedButton(
            onClick = { },
            enabled = false,
            elevation = ButtonDefaults.buttonElevation(
                40.dp,
                30.dp,
                20.dp,
                10.dp,
                0.dp
            ),
        ) {
            Text("轮廓按钮 OutlinedButton")
        }
    }
    Row {
        ElevatedButton(
            onClick = { },
            shape = ButtonDefaults.shape,
            colors = ButtonDefaults.buttonColors(Color.DarkGray),
            elevation = ButtonDefaults.buttonElevation(defaultElevation = 10.dp),
            border = ButtonDefaults.outlinedButtonBorder,
            contentPadding = ButtonDefaults.ContentPadding,
        ) {
            Text("凸起按钮 ElevatedButton")
        }
        ElevatedButton(
            onClick = { },
            enabled = false
        ) {
            Text("凸起按钮 ElevatedButton")
        }
    }
    Row {
        TextButton(
            onClick = { },
            shape = ButtonDefaults.shape,
            colors = ButtonDefaults.buttonColors(Color.DarkGray),
            elevation = ButtonDefaults.buttonElevation(defaultElevation = 10.dp),
            border = BorderStroke(12.dp, Color.Gray),
            contentPadding = PaddingValues(2.dp, 5.dp, 10.dp, 15.dp),
        ) {
            Text("文本按钮 TextButton")
        }
        TextButton(
            onClick = { },
            enabled = false,
            contentPadding = PaddingValues(5.dp, 5.dp, 5.dp, 5.dp),

            ) {
            Text("文本按钮 TextButton")
        }
    }
}
